<template>
  <div id="main">
    <el-container>
      <el-aside :style="{width : $store.state.isCollapse?'auto':'200px'}">
        <Aside />
      </el-aside>
      <el-container :style="{'padding-left' : $store.state.isCollapse?'64px':'200px'}">
        <el-header>
          <Header />
        </el-header>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { useStore } from "vuex";
import Aside from '@/components/Main/Aside.vue'
import Header from '@/components/Main/Header.vue'
import { getUserInfo } from '@/api/main.js'
export default defineComponent({
  name: 'main',
  components: {
    Aside, Header
  },
  setup() {
    const store = useStore()
    // 获取用户信息
    try {
      getUserInfo().then(res => {
        console.log(res);
        if (res && res.status !== '0') return ElMessage({
          message: res.message,
          type: 'error',
        })
        store.commit('saveUserInfo', res.data)
      })
    } catch (ere) {
      console.log(err);
    }
    props: {
    }
  }
})
</script>

<style scoped lang="less">
.el-aside {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: #545c64;
}
.el-header {
  padding: 0 auto;
  background-color: #eee;
}
</style>
